<template>
  <div class="list">
    <Gheader style="margin-bottom: 6px;background: #ffffff; color: #333333;font-weight: bold" position="center" title="问题上报"></Gheader>
    <div class="article">
      <div class="register-content form-content">
        <div class="register-content-title"><span>交通体验日</span></div>
<!--        <div class="input-wrapper">-->
<!--          <van-field v-model="form.problemTitle" label="问题标题" placeholder="输入标题" input-align="right" />-->
<!--        </div>-->
        <div class="input-wrapper">
          <div style="padding-left: 10px">道路名称
<!--            <img @click="showYuyin('1')" style="height: 15px;wisth: auto;vertical-align: middle;margin-top: -2px" src="../../assets/img/yysb.png" alt="">-->
          </div>
          <el-select
              class="myselect"
              style="flex: 1;"
              v-model="form.roadName"
              filterable
              remote
              ref="roadName"
              reserve-keyword
              placeholder="请输入关键词"
              :remote-method="remoteMethod"
              :loading="loading">
            <el-option
                @click.native="changeRoad(item)"
                v-for="item in options"
                :key="item.dldm"
                :label="item.dlmc"
                :value="item.dldm">
            </el-option>
          </el-select>
        </div>
        <div class="input-wrapper">
          <van-field name="radio" label="点位类型">
            <template #input>
              <van-radio-group v-model="radio" direction="horizontal">
                <van-radio name="1">路口</van-radio>
                <van-radio name="2">路段</van-radio>
              </van-radio-group>
            </template>
          </van-field>
        </div>
        <div class="input-wrapper" v-if="radio==1">
          <van-field v-model="form.intersectionName" label="问题点位" readonly @click="showPicker2 = true" placeholder="输入问题点位" input-align="right" />
          <van-popup v-model="showPicker2" position="bottom">
            <van-picker
                show-toolbar
                :columns="intersectionList"
                value-key="ldmc"
                @confirm="onConfirm2"
                @cancel="showPicker2 = false"
            />
          </van-popup>
        </div>
        <div class="input-wrapper" v-if="radio==2">
          <van-field v-model="form.roadSection" label="问题点位" placeholder="输入问题点位" input-align="right" />
        </div>
        <div class="input-wrapper">
          <van-field v-model="form.problemSortName" label="选择问题分类" placeholder="选择问题分类" @click="showPicker3 = true" clearable readonly input-align="right" />
          <van-popup v-model="showPicker3" position="bottom">
            <van-picker
                show-toolbar
                :columns="problemSortList"
                value-key="label"
                @confirm="onConfirmProblemSort"
                @cancel="showPicker3 = false"
            />
          </van-popup>
        </div>
        <div class="input-wrapper">
          <van-field v-model="form.trafficWayName" label="选择出行方式" placeholder="选择出行方式" @click="showPicker = true" clearable readonly input-align="right" />
          <van-popup v-model="showPicker" position="bottom">
            <van-picker
                show-toolbar
                :columns="trafficWayList"
                value-key="label"
                @confirm="onConfirm"
                @cancel="showPicker = false"
            />
          </van-popup>
        </div>
        <div class="input-wrapper">
          <div style="padding-left: 10px">问题上报单位</div>
          <el-select
              class="myselect"
              style="flex: 1;"
              v-model="form.orgName"
              filterable
              ref="orgName"
              :loading="loading"
              placeholder="请输入关键词">
            <el-option
                @click.native="changeOrg(item)"
                v-for="item in deptList"
                :key="item.name"
                :label="item.name"
                :value="item.name">
            </el-option>
          </el-select>
        </div>
<!--        <div class="input-wrapper">-->
<!--          <van-field v-model="form.orgName" label="问题上报单位" readonly clearable @click="showPicker4=true" placeholder="输入上报单位" input-align="right" />-->
<!--          <van-popup v-model="showPicker4" position="bottom">-->
<!--            <van-picker-->
<!--                show-toolbar-->
<!--                :columns="deptList"-->
<!--                value-key="name"-->
<!--                @confirm="onConfirm4"-->
<!--                @cancel="showPicker4 = false"-->
<!--            />-->
<!--          </van-popup>-->
<!--        </div>-->
        <div class="input-wrapper vertical" style="flex-wrap: wrap;height: auto;border-bottom: none;">
          <div class="wrap-name" style="width: 100%;padding-left: 0">
            问题描述 <img @click="showYuyin('2')" style="height: 15px;wisth: auto;vertical-align: middle;margin-top: -2px" src="../../assets/img/yysb.png" alt="">
          </div>
          <van-field v-model="form.problemDes" style="background: #F4F8FE"  rows="3" autosize type="textarea" placeholder="输入问题描述"/>
        </div>
        <div class="input-wrapper vertical" style="flex-wrap: wrap;height: auto;border-bottom: none;">
          <div class="wrap-name" style="width: 100%;padding-left: 0">
            解决建议 <img @click="showYuyin('3')" style="height: 15px;wisth: auto;vertical-align: middle;margin-top: -2px" src="../../assets/img/yysb.png" alt="">
          </div>
          <van-field v-model="form.solution" style="background: #F4F8FE"  rows="3" autosize type="textarea" placeholder="输入解决建议"/>
        </div>
      </div>
      <div class="register-content">
        <div class="register-content-title"><span>现场照片</span></div>
        <div class="input-wrapper" style="height: auto;border-bottom: none">
          <van-uploader v-model="fileList" :after-read="afterRead"/>
        </div>
      </div>
      <van-button class="subbtn" block type="primary" @click="submitform">确认提交</van-button>
    </div>
    <yuyin-dialog v-model="showYuyinDia" @ok="handleOk"></yuyin-dialog>
  </div>
</template>

<script>
import {Icon, Pagination,Empty, Field, Radio, RadioGroup, Button, Uploader, Toast, Dialog} from 'vant'
import {getuserinfo, createProblem, upload, dictData, opsPage, getTrafficIntersectionPage,
  getWechatJsSdkSignatureInfo, getChildDeptList} from '@/api/myapi'
import Gheader from '@/components/Header'
import moment from 'moment'
import ApplyMaterial from "@/components/ApplyMaterial.vue";
import YuyinDialog from "@/components/yuyinDialog.vue";
export default {
  name: "list",
  components: {
    YuyinDialog,
    ApplyMaterial,
    [Icon.name]: Icon,
    [Pagination.name]: Pagination,
    [Empty.name]:Empty,
    [Field.name]: Field,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Button.name]: Button,
    [Uploader.name]: Uploader,
    Gheader
  },
  data() {
    return {
      radio: '1',
      form: {
        fileList: []
      },
      activeIcon: require('../../assets/img/checked.png'),
      inactiveIcon: require('../../assets/img/nocheck.png'),
      ApplyMaterialInfoList: [],
      userInfo: {},
      showDia: false,
      disabled: true,
      checkStatus: 0,
      fileList: [],
      trafficWayList: [],
      problemSortList: [],
      showPicker: false,
      showPicker2: false,
      showPicker3: false,
      showPicker4: false,
      loading: false,
      options: [],
      list: [],
      intersectionList: [],
      showYuyinDia: false,
      vioceType: 0,
      deptList: []
    }
  },
  methods: {
    moment,
    handleOk() {
      this.stopVioce()
    },
    startVioce() {
      var _this = this
      wx.startRecord({
        success: function(e){
          _this.showYuyinDia = true
        },
        cancel: function (e) {
          console.log(e)
        },
        fail: function (err) {
          console.log('fail: ', err)
        }
      })
    },
    stopVioce() {
      var _this = this
      wx.stopRecord({
        success: function (res) {
          _this.translateVoice(res.localId)
        }
      })
    },
    translateVoice(localId) {
      var _this = this
      // 语音转文字
      wx.translateVoice({
        localId: localId,
        isShowProgressTips: 1, // 显示进度提示
        success: function (d) {
          let keyword = d.translateResult; // 转写后的文本
          if(!keyword) {
            Toast('未识别到您的语音')
            _this.showYuyinDia = false
            return
          }
          if(_this.vioceType == 1) {
            _this.form.roadName = keyword
            _this.remoteMethod(_this.form.roadName)
          } else if(_this.vioceType == 2) {
            _this.form.problemDes = keyword
          } else if(_this.vioceType == 3) {
            _this.form.solution = keyword
          }
          _this.showYuyinDia = false
          console.log('translateVoice:', keyword);
          _this.$forceUpdate()
        },
        fail: function (err) {
          Toast('未识别到您的语音')
          console.log(err.errMsg);
        }
      });
      // 结束后的代码处理
    },
    getWechatJsSdkSignatureInfo() {
      if (!window.entryUrl) window.entryUrl = location.href;
      let signLink = /(Android)/i.test(navigator.userAgent)
          ? location.href
          : window.entryUrl;
      var desUrl = encodeURIComponent(signLink);
      getWechatJsSdkSignatureInfo(desUrl, res => {
        if(!res.data || !res.data.appid) {
          return Toast('获取微信参数失败')
        }
        try {
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: res.data.appid,
            timestamp: res.data.timessamp,
            nonceStr: res.data.nonceStr,
            signature: res.data.signature,
            jsApiList: [
              // 必填，需要使用的JS接口列表,写入自己用到的接口名称
              "checkJsApi",
              "openLocation",
              "getLocation",
              'startRecord',
              'stopRecord',
              'playVoice',
              'onVoiceRecordEnd',
              'uploadVoice',
              'onVoicePlayEnd',
              'downloadVoice',
              'translateVoice'
            ],
          });
          // 是否支持指定JS接口
          wx.checkJsApi({
            jsApiList: ['startRecord','translateVoice','stopRecord', 'getLocation'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
            success: function (res) {
              // 以键值对的形式返回，可用的api值true，不可用为false
              // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
            }
          })
          wx.error(function (res) {
            console.log(res);
          });
        } catch (error) {
          console.log(error);
        }
      })
    },
    showYuyin(type) {
      this.vioceType = type
      this.startVioce()
    },
    async changeRoad(val) {
      this.form.roadName = val.dlmc
      this.form.roadCode = val.dldm
      const {data} = await getTrafficIntersectionPage(val.dldm)
      this.intersectionList = data.list || []
    },
    changeOrg(val) {
      this.form = {
        ...this.form,
        orgName: val.name
      }
    },
    onConfirm(val) {
      this.form.trafficWay = val.value
      this.form.trafficWayName = val.label
      this.showPicker = false
    },
    onConfirm2(val) {
      this.form.intersectionName = val.ldmc
      this.showPicker2 = false
    },
    onConfirm4(val) {
      this.form.orgName = val.name
      this.showPicker4 = false
    },
    onConfirmProblemSort(val){
      this.form.problemSortName = val.label
      this.form.problemSort = val.value
      this.showPicker3 = false
    },
    async afterRead(file) {
      var forms = new FormData();
      this.fileList.splice(this.fileList.length -1, 1);
      forms.append("file", file.file);
      upload(forms, res => {
        if(res.code === 0) {
          this.fileList.push({
            url: res.data,
            fileUrl: res.data,
            isImage: true
          })
        }
      })
    },
    submitform() {
      this.form.fileList = this.fileList
      // if(!this.form.problemTitle) return Toast('请填写标题')
      // if(!this.form.orgName) return Toast('请填写部门')
      if(!this.form.roadName) return Toast('请填写道路名称')
      if(this.radio == 1) {
        if(!this.form.intersectionName) return Toast('请填写问题点位')
        this.form.roadSection = ''
      }
      if(this.radio == 2) {
        if(!this.form.roadSection) return Toast('请填写问题点位')
        this.form.intersectionName = ''
      }
      if(!this.form.trafficWay) return Toast('请选择出行方式')
      if(!this.form.problemSortName) return Toast('请选择问题分类')
      if(!this.form.problemDes) return Toast('请填写问题描述')
      if(!this.form.solution) return Toast('请填写解决建议')
      if(this.form.fileList.length === 0) return Toast('请上传现场图片')
      createProblem(this.form, res => {
        if(res.code === 0) {
          Toast('申报成功')
          this.$router.go(-1)
        } else {
          Toast(res.msg)
        }
      })
    },
    getuserinfo() {
      getuserinfo(this.$route.query.openid, res=> {
        if(res.code === 0) {
          this.userInfo = res.data || {}
          this.form.recorder = this.userInfo.id
          this.form.orgName = this.userInfo.orgName
          this.$forceUpdate()
        } else {
          this.userInfo = {}
        }
      })
    },
    async getDict() {
      let {data} = await dictData('traffic_way')
      this.trafficWayList = data

      let res = await dictData('problem_sort')
      this.problemSortList = res.data

      let ress = await getChildDeptList('100')
      this.deptList = ress.data
    },
    async getRoadList(roadName) {
      const {data} = await opsPage(roadName)
      if(data) return data.list
    },
    async remoteMethod(query) {
      if (query !== '') {
        this.loading = true;
        this.options = await this.getRoadList(query)
        this.loading = false;
      } else {
        this.options = [];
      }
    },
  },
  async mounted() {
    this.getDict()
    this.getuserinfo()
    this.getWechatJsSdkSignatureInfo()
  }
}
</script>

<style lang="less" scoped>
.list {
  height: 100%;
  overflow: auto;
  background: rgba(237, 243, 252, 1);
  box-sizing: border-box;
  position: relative;
  color: #404040;
  font-weight: normal;
  overflow: hidden;
  padding-bottom: 15px;
  .article {
    padding: 5px 15px;
    height: calc(100% - 60px);
    overflow: auto;
  }
  .list-item {
    background: #ffffff;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 16px;
  }
  .list-title {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    .name {
      font-size: 14px;
      flex: 1;
      margin-left: 10px;
    }
  }
  .list-item-content {
    color: #646464;
    padding: 20px 10px;
    .items {
      padding: 6px 0;
      display: flex;
    }
  }
}
.input-wrapper {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 6px;
  overflow: hidden;
  height: 40PX;
  margin-bottom: 10px;
  width: 94%;
  margin-left: 3%;
  border: none;
  .inputicon_wrapper {
    position: relative;
    margin-right: 10px;
    &:after {
      content: '';
      position: absolute;
      right: 0;
      width: 1.4px;
      top: 2px;
      height: 20px;
      background: #BBBBBB;
    }
  }
  /deep/.van-radio__label {
    color: #B1B1B1;
  }
  .inputicon {
    width: 22px;
    height: 22px;
    margin: 0 10px 0 20px;
  }
  .img-icon {
    height: 13px;
    width: 13px;
  }
}
.tabs {
  width: 98%;
  background: #ffffff;
  padding: 10px;
  margin: 10px 0;
  border-radius: 6px;
  display: flex;
  .tabitem {
    flex: 1;
    text-align: center;
    &:not(:last-child) {
      border-right: 1px solid #B1B1B1;
    }
    &.active {
      color:#175FB3;
      font-weight: bold;
    }
  }
}
.register-content {
  margin: 10px auto 10px auto;
  background: #ffffff;
  padding-bottom: 12px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 6px;
  .register-content-title {
    display: inline-block;
    background: url('../../assets/img/titlebg.png');
    background-size: 100% 100%;
    padding: 10px 15px 20px 15px;
    color: #ffffff;
  }
  .title {
    position: relative;
    color: #175FB3;
    margin-bottom: 10px;
    padding-left: 20px;
    &.required:before {
      position: absolute;
      left: 2.133vw;
      color: #ee0a24;
      font-size: 3.733vw;
      content: '*';
    }
  }
}
.input-wrapper {
  display: flex;
  align-items: center;
  border-radius: 0px;
  height: 40PX;
  margin-bottom: 10px;
  border-bottom: 1px solid #D6E5FC;
  .van-cell {
    padding-left: 10px;
    padding-right: 10px;
    //background: #F4F8FE;
    border-radius: 6px;
  }
  .inputicon_wrapper {
    position: relative;
    margin-right: 10px;
    &:after {
      content: '';
      position: absolute;
      right: 0;
      width: 1.4px;
      top: 0px;
      height: 22px;
      background: #BBBBBB;
    }
  }
  /deep/.van-radio__label {
    color: #B1B1B1;
  }
  .inputicon {
    width: 22px;
    height: 22px;
    margin: 0 10px 0 18px;
  }
  .img-icon {
    height: 16px;
    width: 16px;
  }
}

.art-list-item {
  padding: 10px 20px 20px 20px;
  border-bottom: 1px solid #dcdcdc;
  background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
  box-shadow: -2px -6px 20px rgba(143, 143, 143, 0.1);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  transition: all 0.5s ease;
  .title {
    display: flex;
    align-items: center;
    div {
      flex: 1;
      font-size: 14px;
      padding: 10px 0;
      color: #646464;
    }
    img {
      width: 28px;
      height: 28px;
      margin-left: 14px;
    }
  }
  .list_content {
    height: auto;
    width: 100%;
  }
  .stitle {
    font-size: 15px;
    padding: 10px 0;
    color: #717171;
  }
  .date {
    color: #8c8c8c;
  }
  .item-img {
    width: 100%;
    margin-top: 4px;
  }
}
.btnwrapper {
  display: flex;
  font-weight: bold;
  padding: 20px;
  background: #ffffff;
  box-shadow: 0px -2px 5px rgba(0,0,0,0.1);
  .backbtn {
    width: 100%;
    margin-right: 10px;
    background: #ffffff;
    border-color: #3276EB;
    border-radius: 8px;
    color: #3276EB;
  }
  .confirmbtn {
    width: 100%;
    margin-left: 10px;
    background: #3276EB;
    color: #ffffff;
    border-color: #3276EB;
    border-radius: 8px;
  }
}

.subbtn {
  border-color: #3F8CFF;
  height: 46px;
  font-size: 15px;
  width: 100%;
  margin: 20px auto 0 auto;
  border-radius: 10px;
  background: #3276EB;
}
.myselect {
  /deep/.el-input--suffix .el-input__inner {
    padding-right: 10px;
  }
  /deep/ .el-input__inner {
    border: none;
    text-align: right;
  }
}
</style>
